<script>
import Form from '../rewardPunishmentForm/RewardPunishment'
import { getAllUser } from '@/api/v2/personnel'
import { createRecord } from '@/api/punishment'
export default {
  components: {
    Form
  },
  props: {
    value: {
      type: Boolean,
      required: true,
      default() {
        return false
      }
    }
  },
  emits: ['success', 'failed'],
  data() {
    return {
      form: {
        employeeID: null,
        reason: '',
        amount: null,
        type: null,
        publishing_mode: null,
        public_type: null,
        isMonth: null
      },
      getUser: {
        type: 2,
        username: ''
      },
      employeeOptions: [],
      isSubmitting: false
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(visible) {
        this.$emit('input', visible)
      }
    }
  },
  watch: {
    visible(v) {
      if (!v) return
      this.loadData()
    }
  },
  methods: {
    handleClose(callback) {
      callback(!this.isSubmitting)
    },
    closeDialog() {
      if (this.isSubmitting) return
      this.$refs.form.resetFields()
      this.visible = false
    },
    buildParams() {
      const { employeeID, reason, amount, isMonth, type, publishing_mode, public_type } = this.form
      console.log(this.form, 'form')
      return {
        user_id: employeeID,
        content: reason,
        amount,
        type,
        is_month: isMonth,
        publishing_mode: publishing_mode,
        public_type: public_type
      }
    },
    handleConfirm() {
      this.$refs.form.validate(async flag => {
        if (!flag) return

        try {
          this.isSubmitting = true

          const params = this.buildParams()
          console.log(params, 'params')
          const result = await createRecord(params)
          this.isSubmitting = false

          if (result.code !== 200) { throw new Error(result.message ?? '创建失败') }

          this.visible = false
                    this.$refs.form?.resetFields()
                    this.$emit('success')
        } catch (e) {
          this.isSubmitting = false
          this.$emit('false')
        }
      })
    },
    async loadData() {
      const result = await Promise.allSettled([
        this.fetchEmployees()
      ])

      const failTasks = result.filter(task => task.status === 'rejected')
      if (failTasks.length > 0) { throw failTasks[0].reason }
    },
    async fetchEmployees(kw) {
      this.getUser.username = kw
      const result = await getAllUser(this.getUser)

      if (result.code !== 200) { throw new Error(result.message ?? '获取失败') }

      this.employeeOptions = result.data.map(item => {
        const { id, username } = item
        return {
          label: username,
          value: id
        }
      })
    }
  }
}
</script>

<template>
  <!-- <el-drawer title="创建奖惩" :visible.sync="visible" width="30%"
    :wrapperClosable="false" :before-close="handleClose">
        <div class="createReward-box">
            <Form
            ref="form"
            :employeeOptions="employeeOptions"
            :fetchEmployeeOptionsFn="fetchEmployees"
            :loading="isSubmitting"
            :disabled="isSubmitting"
            v-model="form"
        />
            <el-button
                type="primary"
                :disabled="isSubmitting"
                :loading="isSubmitting"
                @click="handleConfirm"
            >
                确 定
            </el-button>
            <el-button
                @click="closeDialog"
                :disabled="isSubmitting"
            >
                取 消
            </el-button>
        </div>
    </el-drawer> -->
  <el-dialog
    :visible.sync="visible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    @close="closeDialog"
  >
    <div slot="title" class="dialog-title">
      <span class="title-text">创建奖惩</span>
    </div>
    <Form
      ref="form"
      v-model="form"
      :employee-options="employeeOptions"
      :fetch-employee-options-fn="fetchEmployees"
      :loading="isSubmitting"
      :disabled="isSubmitting"
    />
    <div slot="footer" class="dialog-footer">
      <el-button
        :disabled="isSubmitting"
        @click="closeDialog"
      >
        取 消
      </el-button>
      <el-button
        type="primary"
        :disabled="isSubmitting"
        :loading="isSubmitting"
        @click="handleConfirm"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
    .createReward-box{
        margin:0 20px;
    }
    .dialog-title {
  position: relative;
  padding-bottom: 10px;
  .title-text{
    position: absolute;
    left: 20px;
    font-size: 20px;
  }
}
::v-deep .el-dialog__headerbtn {
    font-size: 24px;
}
::v-deep .el-dialog__header{
    padding: 20px 0;
    padding-bottom: 6px;
}
::v-deep .el-dialog__body{
    padding: 30px 0;
}
</style>
